<template>
    <div>
        <h1>Spark抖音直播间数据可视化</h1>
    </div>
    <div class="select">
        <div class="select-room_id">
            直播间号
            <el-select v-model="room_id" placeholder="请选择直播间号" size="large" style="width: 240px">
                <el-option v-for="item in room_id_list" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="select-analyzed_date">
            直播日期
            <el-select v-model="analyzed_date" placeholder="请选择直播日期" size="large" style="width: 240px">
                <el-option v-for="item in analyzed_date_list" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </div>
    </div>
    <div>
        <button class="select-button" @click="view_data">查看数据</button>
    </div>
</template>


<script setup>
import { defineComponent, ref, onMounted, onUnmounted, getCurrentInstance, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const { appContext } = getCurrentInstance();
const HOST_URL = appContext.config.globalProperties.$HOST_URL
let router = useRouter()
let room_id = ref('')
let room_id_list = ref([])
let analyzed_date = ref('')
let analyzed_date_list = ref([])


const fetchRoomIdList = async () => {
    try {
        const response = await axios.get(`${HOST_URL}/init/room/list`);
        room_id_list.value = response.data;
    } catch (error) {
        ElMessage.error('后端房间号列表请求失败');
        console.error('请求失败:', error);
    }
};

const fetchAnalyzedDateList = async (roomId) => {
    try {
        const response = await axios.get(`${HOST_URL}/init/date/list`, { params: { room_id: roomId } });
        analyzed_date_list.value = response.data;
    } catch (error) {
        ElMessage.error('后端日期列表请求失败');
        console.error('请求失败:', error);
    }
};

const view_data = () => {
    if (!room_id.value) {
        ElMessage.error('请选择直播间号');
        return;
    }
    if (!analyzed_date.value) {
        ElMessage.error('请选择直播日期');
        return;
    }
    router.push({
        path: '/home',
        query: {
            room_id: room_id.value,
            analyzed_date: analyzed_date.value
        }
    });
}

// onMounted生命周期代表组件挂载的过程
// 加载数据 dom操作
// 发请求
// 数据的初始化 接受路由传递的参数
onMounted(() => {
    fetchRoomIdList();
})

// onMounted是组件卸载时的生命周期
// 比如跳转到其他页面时，组件会被销毁， 这个生命周期就会被触发
// 清除定时器 清除闭包函数
onUnmounted(() => {
    // console.log('unmounted')
})

watch(room_id, (newRoomId) => {
    if (newRoomId) {
        fetchAnalyzedDateList(newRoomId);
    }
});

</script>

<style lang="scss">
// 让h1标签居中,将字体颜色变为青色
h1 {
    text-align: center;
    color: #3bc0c0;
    // 让元素向下移动50px
    margin-top: 210px;
}

// 让select居中
.select {
    text-align: center;
    margin-top: 150px;
}

// 让select-room_id变大，同时字体颜色变为青色
.select-room_id {
    font-size: 18px;
    color: #5aadad;
    margin-top: 150px;
}

.select-analyzed_date {
    font-size: 18px;
    color: #5aadad;
    margin-top: 30px;
}

.select-button {
    font-size: 18px;
    color: #5aadad;
    border-radius: 10px;
    border: none;
    width: 200px;
    height: 50px;
    display: block;
    margin: 50px auto 0;
    /* 调整上边距以向下移动按钮 */
    background-color: #f0f0f0;
    /* 添加背景色 */
    cursor: pointer;
    /* 鼠标悬停时显示手型光标 */
    transition: all 0.3s ease;
    /* 添加过渡效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
    background-color: #e5f0f0;
    /* 淡青色,与文字颜色 #5aadad 协调 */
}

.select-button:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    /* 增强阴影效果 */
}

.select-button:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    /* 减弱阴影效果 */
}
</style>